<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="box">
    <!-- 需要将首字母大写   -->
    {{computeNickname}}
    {{computeNickname}}
    {{methodNickName()}}
    {{methodNickName()}}
</div>
</body>
<script>
    var obj = {
        data() {
            return {
                nickname: "yyhnap"
            }
        },
        methods:{
            //计算一个结果没有缓存
            methodNickName(){
                console.log("method") //执行两遍
                return this.nickname.substring(0,1).toUpperCase() + this.nickname.substring(1)
            }//事件处理函数
        },
        //计算结果会缓存
        computed:{
            //基于依赖修改之后，重新计算一遍
            computeNickname(){
                console.log("compute") ////执行一遍
                return this.nickname.substring(0,1).toUpperCase() + this.nickname.substring(1)
            }
        }

    }
    var app = Vue.createApp(obj).mount("#box")
</script>
</html>